<template>
  <div class="user-management-container">
    <el-card class="page-header-card">
      <div class="page-header">
        <div class="page-title">
          <h2>用户管理</h2>
          <p>管理系统用户信息、审核用户车辆</p>
        </div>
      </div>
    </el-card>
    
    <!-- 用户列表与搜索 -->
    <el-card class="user-list-card">
      <template #header>
        <div class="card-header">
          <span>用户列表</span>
          <div class="header-actions">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索用户名/姓名/手机号"
              style="width: 220px; margin-right: 10px;"
              clearable
              @clear="fetchUsers"
              @keyup.enter="handleSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
            <el-select 
              v-model="filterRole" 
              placeholder="角色" 
              clearable
              style="width: 120px; margin-right: 10px;"
              @change="handleFilterChange"
            >
              <el-option label="全部" value="" />
              <el-option label="普通用户" :value="0" />
              <el-option label="管理员" :value="1" />
            </el-select>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button type="success" @click="showAddUserDialog">新增用户</el-button>
          </div>
        </div>
      </template>
      
      <div v-loading="listLoading">
        <el-table
          :data="userList"
          border
          style="width: 100%"
          @row-click="handleRowClick"
          row-key="id"
        >
          <el-table-column prop="id" label="ID" width="80" sortable />
          <el-table-column prop="username" label="用户名" width="120" />
          <el-table-column prop="realName" label="真实姓名" width="120" />
          <el-table-column prop="phone" label="手机号码" width="130" />
          <el-table-column prop="email" label="电子邮箱" width="180" />
          <el-table-column label="角色" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.role === 1 ? 'danger' : 'primary'">
                {{ scope.row.role === 1 ? '管理员' : '普通用户' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
                {{ scope.row.status === 1 ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="180">
            <template #default="scope">
              {{ formatDateTime(scope.row.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="250">
            <template #default="scope">
              <el-button 
                type="primary" 
                size="small" 
                @click.stop="handleEditUser(scope.row)"
              >编辑</el-button>
              <el-button 
                type="success" 
                size="small" 
                @click.stop="handleViewVehicles(scope.row)"
              >查看车辆</el-button>
              <el-button 
                :type="scope.row.status === 1 ? 'warning' : 'success'" 
                size="small" 
                @click.stop="handleToggleStatus(scope.row)"
              >{{ scope.row.status === 1 ? '禁用' : '启用' }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-card>
    
    <!-- 添加/编辑用户对话框 -->
    <el-dialog
      v-model="userDialog.visible"
      :title="userDialog.isEdit ? '编辑用户' : '添加用户'"
      width="500px"
      @close="resetUserForm"
    >
      <el-form
        ref="userFormRef"
        :model="userForm"
        :rules="userRules"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" :disabled="userDialog.isEdit" />
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="!userDialog.isEdit || userDialog.changePassword">
          <el-input v-model="userForm.password" type="password" show-password />
        </el-form-item>
        <el-form-item v-else>
          <el-button type="text" @click="userDialog.changePassword = true">修改密码</el-button>
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="userForm.realName" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="userForm.phone" />
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="userForm.email" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="userForm.role" style="width: 100%">
            <el-option :value="0" label="普通用户" />
            <el-option :value="1" label="管理员" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="userForm.status" style="width: 100%">
            <el-option :value="1" label="启用" />
            <el-option :value="0" label="禁用" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="userDialog.visible = false">取消</el-button>
          <el-button type="primary" @click="submitUserForm" :loading="submitting">
            {{ userDialog.isEdit ? '保存' : '添加' }}
          </el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 用户车辆列表对话框 -->
    <el-dialog
      v-model="vehicleDialog.visible"
      :title="`${vehicleDialog.user?.realName || ''} 的车辆信息`"
      width="800px"
    >
      <div v-loading="vehicleDialog.loading">
        <el-empty v-if="vehicleDialog.vehicles.length === 0" description="该用户暂无车辆信息" />
        <div v-else>
          <el-table :data="vehicleDialog.vehicles" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="60" />
            <el-table-column prop="plateNumber" label="车牌号" width="120" />
            <el-table-column prop="vehicleBrand" label="品牌" width="100" />
            <el-table-column prop="vehicleModel" label="型号" width="120" />
            <el-table-column prop="vehicleColor" label="颜色" width="80" />
            <el-table-column label="是否默认" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.isDefault === 1 ? 'success' : 'info'" size="small">
                  {{ scope.row.isDefault === 1 ? '是' : '否' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getVehicleStatusType(scope.row.status)" size="small">
                  {{ getVehicleStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-button 
                  v-if="scope.row.status === 0"
                  type="success" 
                  size="small" 
                  @click="handleAuditVehicle(scope.row, 1)"
                >通过</el-button>
                <el-button 
                  v-if="scope.row.status === 0"
                  type="danger" 
                  size="small" 
                  @click="handleAuditVehicle(scope.row, 2)"
                >拒绝</el-button>
                <el-button 
                  v-if="scope.row.status !== 0"
                  type="info" 
                  size="small" 
                  @click="handleResetVehicleStatus(scope.row)"
                >重置审核</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
    
    <!-- 用户详情对话框 -->
    <el-drawer
      v-model="userDetailVisible"
      :title="userDetail ? userDetail.realName + ' 的详细信息' : '用户详情'"
      direction="rtl"
      size="500px"
    >
      <div v-if="userDetail" class="user-detail-content">
        <div class="detail-header">
          <el-avatar :size="80" :src="AppConfig.defaultAvatar"></el-avatar>
          <div class="user-info">
            <h3>{{ userDetail.realName }}</h3>
            <div class="user-meta">
              <el-tag :type="userDetail.role === 1 ? 'danger' : 'primary'" class="meta-tag">
                {{ userDetail.role === 1 ? '管理员' : '普通用户' }}
              </el-tag>
              <el-tag :type="userDetail.status === 1 ? 'success' : 'info'" class="meta-tag">
                {{ userDetail.status === 1 ? '启用' : '禁用' }}
              </el-tag>
            </div>
          </div>
        </div>
        
        <div class="detail-section">
          <h4 class="section-title">基本信息</h4>
          <div class="info-item">
            <span class="info-label">用户ID</span>
            <span class="info-value">{{ userDetail.id }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">用户名</span>
            <span class="info-value">{{ userDetail.username }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">真实姓名</span>
            <span class="info-value">{{ userDetail.realName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">手机号码</span>
            <span class="info-value">{{ userDetail.phone }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">电子邮箱</span>
            <span class="info-value">{{ userDetail.email }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">创建时间</span>
            <span class="info-value">{{ formatDateTime(userDetail.createdAt) }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">更新时间</span>
            <span class="info-value">{{ formatDateTime(userDetail.updatedAt) }}</span>
          </div>
        </div>
        
        <div class="detail-section">
          <h4 class="section-title">车辆信息 
            <el-button type="text" size="small" @click="handleViewVehicles(userDetail)">查看详情</el-button>
          </h4>
          <div v-if="userDetailVehicles.length === 0" class="empty-data">
            <el-empty description="暂无车辆信息" :image-size="80"></el-empty>
          </div>
          <div v-else class="vehicle-summary">
            <div 
              v-for="vehicle in userDetailVehicles" 
              :key="vehicle.id" 
              class="vehicle-item"
            >
              <div class="vehicle-plate">{{ vehicle.plateNumber }}</div>
              <div class="vehicle-info">{{ vehicle.vehicleBrand }} {{ vehicle.vehicleModel }}</div>
              <el-tag :type="getVehicleStatusType(vehicle.status)" size="small">
                {{ getVehicleStatusText(vehicle.status) }}
              </el-tag>
            </div>
          </div>
        </div>
        
        <div class="action-buttons">
          <el-button type="primary" @click="handleEditUser(userDetail)">编辑用户</el-button>
          <el-button 
            :type="userDetail.status === 1 ? 'warning' : 'success'" 
            @click="handleToggleStatus(userDetail)"
          >{{ userDetail.status === 1 ? '禁用账户' : '启用账户' }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Edit, Delete, View } from '@element-plus/icons-vue'
import { getUserList, getUserDetail, updateUserStatus, resetUserPassword, addUser, updateUser, deleteUser, getUserAuditList, auditUser } from '@/api/admin'
import AppConfig from '@/config/app'

// 用户列表数据
const userList = ref([])
const listLoading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 搜索和筛选条件
const searchKeyword = ref('')
const filterRole = ref('')
const filterStatus = ref('')

// 用户表单对话框状态
const userDialog = reactive({
  visible: false,
  isEdit: false,
  changePassword: false
})

// 用户表单引用
const userFormRef = ref(null)

// 用户表单数据
const userForm = reactive({
  id: '',
  username: '',
  password: '',
  realName: '',
  phone: '',
  email: '',
  role: 0,
  status: 1
})

// 用户表单验证规则
const userRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入电子邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
}

// 提交状态
const submitting = ref(false)

// 车辆对话框状态
const vehicleDialog = reactive({
  visible: false,
  loading: false,
  user: null,
  vehicles: []
})

// 用户详情抽屉
const userDetailVisible = ref(false)
const userDetail = ref(null)
const userDetailVehicles = ref([])

// 格式化日期时间
const formatDateTime = (dateTimeStr) => {
  if (!dateTimeStr) return '-'
  const date = new Date(dateTimeStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  }).replace(/\//g, '-')
}

// 获取车辆状态类型
const getVehicleStatusType = (status) => {
  switch (status) {
    case 0: return 'info'
    case 1: return 'success'
    case 2: return 'danger'
    default: return 'info'
  }
}

// 获取车辆状态文本
const getVehicleStatusText = (status) => {
  switch (status) {
    case 0: return '待审核'
    case 1: return '已审核'
    case 2: return '已拒绝'
    default: return '未知'
  }
}

// 获取用户列表
const fetchUsers = async () => {
  listLoading.value = true
  
  try {
    // 构建查询参数
    const params = {
      page: currentPage.value,
      size: pageSize.value,
      username: searchKeyword.value || undefined,
      role: filterRole.value || undefined,
      status: filterStatus.value || undefined
    }
    
    // 调用真实API
    const response = await getUserList(params)
    if (response.code === 200) {
      // 设置数据
      userList.value = response.data.records || []
      total.value = response.data.total || 0
    } else {
      ElMessage.error(response.message || '获取用户列表失败')
    }
    
    listLoading.value = false
  } catch (error) {
    console.error('获取用户列表失败', error)
    ElMessage.error('获取用户列表失败')
    listLoading.value = false
  }
}

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1;
  fetchUsers();
}

// 处理筛选条件变更
const handleFilterChange = () => {
  currentPage.value = 1;
  fetchUsers();
}

// 处理分页大小变更
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchUsers();
}

// 处理页码变更
const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchUsers();
}

// 显示添加用户对话框
const showAddUserDialog = () => {
  userDialog.isEdit = false;
  userDialog.changePassword = false;
  userDialog.visible = true;
}

// 处理编辑用户
const handleEditUser = async (row) => {
  try {
    // 获取用户详情
    const response = await getUserDetail(row.id)
    if (response.code === 200) {
      const userData = response.data
      
      // 设置表单数据
      userForm.id = userData.id
      userForm.username = userData.username
      userForm.realName = userData.realName
      userForm.phone = userData.phone
      userForm.email = userData.email
      userForm.role = userData.role
      userForm.status = userData.status
      
      userDialog.isEdit = true
      userDialog.visible = true
    } else {
      ElMessage.error(response.message || '获取用户详情失败')
    }
  } catch (error) {
    console.error('获取用户详情失败', error)
    ElMessage.error('获取用户详情失败')
  }
}

// 重置用户表单
const resetUserForm = () => {
  userFormRef.value?.resetFields();
  Object.keys(userForm).forEach(key => {
    if (key === 'role' || key === 'status') {
      userForm[key] = key === 'role' ? 0 : 1; // 默认角色为普通用户，状态为启用
    } else {
      userForm[key] = '';
    }
  });
}

// 提交用户表单
const submitUserForm = () => {
  userFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 准备提交数据
        const userData = {
          username: userForm.username,
          realName: userForm.realName,
          phone: userForm.phone,
          email: userForm.email,
          role: userForm.role,
          status: userForm.status
        }
        
        // 如果是新增用户，添加密码字段
        if (!userDialog.isEdit) {
          userData.password = userForm.password
        }
        
        let response
        if (userDialog.isEdit) {
          // 调用更新API
          response = await updateUser(userForm.id, userData)
        } else {
          // 调用创建API
          response = await addUser(userData)
        }
        
        if (response.code === 200) {
          ElMessage.success(userDialog.isEdit ? '更新用户成功' : '创建用户成功')
          userDialog.visible = false
          fetchUsers()
        } else {
          ElMessage.error(response.message || (userDialog.isEdit ? '更新用户失败' : '创建用户失败'))
        }
      } catch (error) {
        console.error(userDialog.isEdit ? '更新用户失败' : '创建用户失败', error)
        ElMessage.error(userDialog.isEdit ? '更新用户失败' : '创建用户失败')
      }
    }
  })
}

// 处理切换用户状态
const handleToggleStatus = async (row) => {
  const newStatus = row.status === 1 ? 0 : 1
  const statusText = newStatus === 1 ? '启用' : '禁用'
  
  try {
    // 调用真实API更新用户状态
    const response = await updateUserStatus(row.id, newStatus)
    if (response.code === 200) {
      ElMessage.success(`已${statusText}用户【${row.username}】`)
      
      // 更新本地数据
      const index = userList.value.findIndex(user => user.id === row.id)
      if (index !== -1) {
        userList.value[index].status = newStatus
      }
    } else {
      // 恢复开关状态
      row.status = row.status === 1 ? 0 : 1
      ElMessage.error(response.message || `${statusText}用户失败`)
    }
  } catch (error) {
    // 恢复开关状态
    row.status = row.status === 1 ? 0 : 1
    console.error(`${statusText}用户失败`, error)
    ElMessage.error(`${statusText}用户失败`)
  }
}

// 处理查看用户车辆
const handleViewVehicles = (row) => {
  vehicleDialog.user = row;
  vehicleDialog.vehicles = row.vehicles || [];
  vehicleDialog.visible = true;
  
  // 同时更新用户详情中的车辆信息
  userDetailVehicles.value = vehicleDialog.vehicles;
}

// 处理审核车辆
const handleAuditVehicle = (vehicle, status) => {
  const action = status === 1 ? '通过' : '拒绝';
  
  ElMessageBox.prompt(
    `确定要${action}车牌号为 "${vehicle.plateNumber}" 的车辆审核吗？`,
    '审核意见',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: status === 1 ? 'info' : 'warning',
      inputPlaceholder: '请输入审核意见(可选)'
    }
  ).then(({ value: remark }) => {
    // 创建审核记录
    createVehicleAuditRecord(vehicle, status, remark);
  }).catch(() => {
    // 取消操作，无需处理
  });
}

// 创建车辆审核记录
const createVehicleAuditRecord = async (vehicle, status, remark) => {
  try {
    // 创建审核数据
    const auditData = {
      userId: vehicle.userId,
      auditType: 2, // 车辆审核
      relatedId: vehicle.id,
      relatedInfo: vehicle.plateNumber,
      status: 0 // 先创建为待审核状态
    };
    
    // 创建审核记录
    const createResponse = await auditUser(null, auditData);
    if (createResponse.code !== 200) {
      ElMessage.error(createResponse.message || '创建审核记录失败');
      return;
    }
    
    // 获取审核记录ID
    const auditId = createResponse.data.id;
    
    // 处理审核
    const processResponse = await auditUser(auditId, { status, remark });
    
    if (processResponse.code === 200) {
      ElMessage.success(`车辆审核已${status === 1 ? '通过' : '拒绝'}`);
      
      // 更新本地数据
      const index = vehicleDialog.vehicles.findIndex(v => v.id === vehicle.id);
      if (index !== -1) {
        vehicleDialog.vehicles[index].status = status;
      }
      
      // 更新用户详情中的车辆信息
      const detailIndex = userDetailVehicles.value.findIndex(v => v.id === vehicle.id);
      if (detailIndex !== -1) {
        userDetailVehicles.value[detailIndex].status = status;
      }
    } else {
      ElMessage.error(processResponse.message || '处理审核失败');
    }
  } catch (error) {
    console.error('处理车辆审核失败:', error);
    ElMessage.error('处理车辆审核失败，请稍后重试');
  }
}

// 处理重置车辆审核状态
const handleResetVehicleStatus = (vehicle) => {
  ElMessageBox.confirm(
    `确定要重置车牌号为 "${vehicle.plateNumber}" 的车辆审核状态吗？`, 
    '提示', 
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      // 创建审核数据
      const auditData = {
        userId: vehicle.userId,
        auditType: 2, // 车辆审核
        relatedId: vehicle.id,
        relatedInfo: vehicle.plateNumber,
        status: 0 // 待审核状态
      };
      
      // 创建审核记录
      const response = await auditUser(null, auditData);
      
      if (response.code === 200) {
        ElMessage.success('车辆审核状态已重置');
        
        // 更新本地数据
        const index = vehicleDialog.vehicles.findIndex(v => v.id === vehicle.id);
        if (index !== -1) {
          vehicleDialog.vehicles[index].status = 0; // 重置为待审核
        }
        
        // 更新用户详情中的车辆信息
        const detailIndex = userDetailVehicles.value.findIndex(v => v.id === vehicle.id);
        if (detailIndex !== -1) {
          userDetailVehicles.value[detailIndex].status = 0;
        }
      } else {
        ElMessage.error(response.message || '重置审核状态失败');
      }
    } catch (error) {
      console.error('重置车辆审核状态失败:', error);
      ElMessage.error('重置车辆审核状态失败，请稍后重试');
    }
  }).catch(() => {
    // 取消操作，无需处理
  });
}

// 处理点击用户行，显示用户详情
const handleRowClick = (row) => {
  userDetail.value = row;
  userDetailVisible.value = true;
  
  // 加载用户的车辆信息
  handleViewVehicles(row);
}

// 查看用户详情
const handleViewDetail = async (row) => {
  try {
    // 调用真实API获取用户详情
    const response = await getUserDetail(row.id);
    if (response.code === 200) {
      userDetail.value = response.data;
      userDetailVehicles.value = response.data.vehicles || [];
      userDetailDialogVisible.value = true;
    } else {
      ElMessage.error(response.message || '获取用户详情失败');
    }
  } catch (error) {
    console.error('获取用户详情失败', error);
    ElMessage.error('获取用户详情失败');
  }
}

// 处理删除用户
const handleDeleteUser = (row) => {
  ElMessageBox.confirm(`确定要删除用户【${row.username}】吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      // 调用真实API删除用户
      const response = await deleteUser(row.id);
      if (response.code === 200) {
        ElMessage.success(`已删除用户【${row.username}】`);
        // 重新加载数据
        fetchUsers();
      } else {
        ElMessage.error(response.message || '删除用户失败');
      }
    } catch (error) {
      console.error('删除用户失败', error);
      ElMessage.error('删除用户失败');
    }
  }).catch(() => {});
}

// 重置用户密码
const handleResetPassword = (row) => {
  ElMessageBox.confirm(`确定要重置用户【${row.username}】的密码吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      // 调用真实API重置密码
      const response = await resetUserPassword(row.id);
      if (response.code === 200) {
        ElMessage.success(`已重置用户【${row.username}】的密码`);
      } else {
        ElMessage.error(response.message || '重置密码失败');
      }
    } catch (error) {
      console.error('重置密码失败', error);
      ElMessage.error('重置密码失败');
    }
  }).catch(() => {});
}

// 组件挂载时获取用户列表
onMounted(() => {
  fetchUsers();
})
</script>

<style scoped>
.user-management-container {
  min-height: calc(100vh - 180px);
}

.page-header-card {
  margin-bottom: 20px;
  background: linear-gradient(135deg, #1a237e, #283593);
  color: white;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title h2 {
  margin: 0;
  font-size: 24px;
}

.page-title p {
  margin: 8px 0 0;
  opacity: 0.8;
  font-size: 14px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.user-list-card {
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 用户详情样式 */
.user-detail-content {
  padding: 0 20px;
}

.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.user-info {
  margin-left: 20px;
}

.user-info h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.user-meta {
  display: flex;
  gap: 10px;
}

.meta-tag {
  margin-right: 5px;
}

.detail-section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.section-title {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #606266;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-item {
  display: flex;
  margin-bottom: 10px;
}

.info-label {
  width: 100px;
  color: #909399;
}

.info-value {
  color: #303133;
  font-weight: 500;
}

.vehicle-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vehicle-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.vehicle-plate {
  font-weight: bold;
  color: #303133;
}

.vehicle-info {
  color: #606266;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

.empty-data {
  padding: 20px 0;
}

@media screen and (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .header-actions {
    margin-top: 10px;
    width: 100%;
  }
  
  .header-actions .el-input,
  .header-actions .el-select {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 10px;
  }
  
  .header-actions .el-button {
    flex: 1;
  }
  
  .detail-header {
    flex-direction: column;
    text-align: center;
  }
  
  .user-info {
    margin-left: 0;
    margin-top: 10px;
  }
  
  .user-meta {
    justify-content: center;
  }
  
  .info-item {
    flex-direction: column;
  }
  
  .info-label {
    width: 100%;
  }
  
  .action-buttons {
    flex-direction: column;
  }
}
</style> 